<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript" src="<s:url value='/js/jquery2.js' />"></script>
<style type="text/css">
 .redBorder{
 	border:#CC0033 2px solid;
 }



</style>

</head>
<body>
	<table id="refundTable">
	<tr>
	<td>交易号</td>
	<td>金额</td>
	<td>退款理由</td>
	<td>隐藏</td>
	<td><a href="javascript:;" id="addTr" onclick="doAdd();">新增</a></td>
	</tr>
	
	<tr class="maintr">
	<td ><input id="tradeNo0" name="tradeNo" onblur="fill(this);"/></td>
	<td ><input id="amount0" name="amount" onblur="fill(this);" /></td>
	<td><input  id="reason0" name="reason" onblur="fill(this);" value="协商退款"/></td>
	<td ><input  id="refundParam0" name="refundParam"/></td>
	<td><a href="javascript:;" id="doDelete" onclick="doDelete(this);">删除</a>
	</tr>
</table>
<input type="button" value="提交"  onclick="test();">

</body>


<script type="text/javascript">
var num=0;

 function fill(obj){
  var trNode=$(obj.parentNode.parentNode);
  var refundParamNode=trNode.find("input[name='refundParam']");
  refundParamNode.val('');
  var tradeNo=trNode.find("input[name='tradeNo']");
  var amount=trNode.find("input[name='amount']");
  var reason=trNode.find("input[name='reason']");
  
  if(tradeNo.val().length<1){
  	tradeNo.addClass('redBorder');
  }else{
  	tradeNo.removeClass('redBorder');
  }
  if(amount.val().length<1){
  	amount.addClass('redBorder');
  }else{
  	amount.removeClass('redBorder');
  }
  
   if(reason.val().length<1){
  	reason.addClass('redBorder');
  }else{
  	reason.removeClass('redBorder');
  }
  
  refundParamNode.val(tradeNo.val()+"^"+amount.val()+"^"+reason.val());
 }
 
 function doAdd(){
	if(!check()){
	return; 
	} 
 	if(num>5){
 	return ;
   }
 	num=num+1;
   var clone = $('.maintr').eq(0).clone(true);
   var trade=$("input[name='tradeNo']",clone);
   var amount=$("input[name='amount']",clone);
   var refundParam=$("input[name='refundParam']",clone);
   var reason=$("input[name='reason']",clone);
   trade.val("");
   amount.val("");
   refundParam.val("");
   
  trade.attr("id", "tradeNo"+num); 
  amount.attr("id", "amount"+num);
  reason.attr("id", "reason"+num); 
  reason.val("协商退款");
  refundParam.attr("id", "refundParam"+num);
  clone.appendTo('#refundTable').show();
 
 }
 
 function doDelete(obj){
  num=num-1
 $(obj.parentNode.parentNode).remove();
 }
 
 
 function check(){
 	var isSuccess=true;
 	$('#refundTable').find('input').each(
 	function(){
 		if($(this).val().length<1){
 			$(this).addClass('redBorder');
 			isSuccess=false;
 		}else{
 			$(this).removeClass('redBorder');
 		}
 	}
 	)
 	return isSuccess;
 
 }

</script>
</html>